<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<%@ include file="/common/commonsetlanguage.jsp" %>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML5 Workshop - Tools</title>
  <link rel="stylesheet" href="js/jquery.mobile-1.0rc2.min.css" />
  <link rel="stylesheet" href="css/common.css" />
  <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="js/common/ui.js"></script>
  <script type="text/javascript" src="js/game/gamedetail.js"></script>
  <script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>

<script>
addMetaFile("gamedetail","game");
</script>
</head>
<fmt:bundle basename="app">
<body>
  <%@ include file="/common/commonGame.html" %>
  <!--gamesContent_container start-->
  <div id="page_container">
    <!--gamesName_box start-->
    <ul id="gamesName_box">
	  <li id="games_leftarrow"></li>
	  <li id="games_names">THE BOLING GAME</li>
	  <li id="games_start">Start This Game</li>
	  <li id="games_rightarrow"></li>
	</ul>
	<!--gamesName_box end-->
    <div data-role="page" id="area1" class="page_area">
      <div data-role="content" id="content1">
	    <!--gamesBanner_box start-->
        <div id="gamesBanner_box">
		  <div id="one_banner"></div>
		  <ul id="more_banner">
		    <li id="banner_left"></li>
			<li id="banner_center"></li>
			<li id="banner_right"></li>
		  </ul>
		</div>
		<!--gamesBanner_box end-->
		<!--gamesStar_box start-->
		<div id="gamesStar_box">
		  <ul id="games_star">
		    <li class="star_color"></li>
			<li class="star_color"></li>
			<li class="star_color"></li>
			<li class="star_half"></li>
			<li class="star_nocolor"></li>
		  </ul>
		  <div id="visitors">已有108人浏览过</div>
		</div>
		<!--gamesStar_box end-->
		<div class="black_line"></div>
		<div id="games_description">
		  <h1 id="title_description">Description</h1>
		  <p id="description_text">description is one of four rhetorical modes (also known as modes of discourse), along with exposition, argumentation, and narration. Each of the rhetorical modes is present in a variety of forms and each has its own purpose and conventions.
             Description is also the fiction-writing mode for transmitting a mental image of the particulars of a story.</p>
		</div>
		<div class="black_line"></div>
		<div id="play_box">
		  <h1 id="title_play">How to play</h1>
		  <p id="description_text">description is one of four rhetorical modes (also known as modes of discourse), along with exposition, argumentation, and narration. Each of the rhetorical modes is present in a variety of forms and each has its own purpose and conventions.
             Description is also the fiction-writing mode for transmitting a mental image of the particulars of a story.</p>
		</div>
		<div class="black_line iphone_black_line"></div>
		<div id="comment_box">
		  <h1 id="title_comment">Comment</h1>
		  <div id="user_box">
		    <ul id="information_column">
			  <li class="column1"><lable for="name" class="user_information">*Name</lable></li>  
			  <li><input type="text" id="name_text"/></li>
			  <li class="column1"><lable for="name" class="user_information">*Mail</lable></li>
			  <li><input type="text" id="mail_text"/></li>
			  <li><a href="#" id="button_submit1">Submit</a></li>
			</ul>
			<div id="information_text"></div>
		  </div>
		</div>
		
		<div class="message_box">
		  <h1><img src="image/games_content/web_game_con_icon1.png"/><span class="message_text">Simon(2011-11-15:11)</span<</h1>
		  <p class="games_summary">This is the official TinEye Chrome extention</p>
		</div>
		
		<div id="replay_box">
		  <div id="replay_left">
		    <h1><img src="image/games_content/web_game_con_icon1.png"/><span class="message_text">Simon(2011-11-15:11)</span<</h1>
		    <p class="games_summary">This is the official TinEye Chrome extention</p>
		  </div>
		  <a href="#" id="button_reply">Reply</a>
		</div>
		
		<div id="replyComment_box">
		  <ul id="information_column1">
		    <li class="column1"><lable for="name" class="user_information">*Name</lable></li> 
			<li><input type="text" id="name_text1"/></li>
			<li><li class="column1"><lable for="name" class="user_information">*Mail</lable></li></li>
			<li><input type="text" id="mail_text1"/></li>
			<li><a href="#" id="button_submit">Submit</a></li>
			<li><a href="#" id="button_cancel">Cancel</a></li>
		  </ul>
		  <div id="information_text1"></div>
		</div>
		
		<div class="message_box">
		  <h1><img src="image/games_content/web_game_con_icon1.png"/><span class="message_text">Simon(2011-11-15:11)</span<</h1>
		  <p class="games_summary">This is the official TinEye Chrome extention</p>
		</div>
      </div>
	</div>
	<!--bowling page end -->
	
	<div data-role="page" id="area2" class="page_area">
      <div data-role="content" id="content2">
      </div>
      </div>
	<div id="web_page_outbox">
		<ul id="page_box">
			  <li class="page_text" >上一页</li>
			  <li class="page_text page1">1</li>
			  <li class="page_text page2">2</li>
			  <li class="page_text page2 page3">3</li>
			  <li class="page_text page2">4</li>
			  <li class="page_text page2">5</li>
			  <li class="page_text page2">6</li>
			  <li class="page_text page1">下一页</li>
		</ul>
	</div>
	
  </div>
  <!--gamesContent_container end-->
  <footer id="footer">
	  <p id="copyright">Copyright@2011 Google条款和隐私权</p> 
  </footer>
</body>
<script>
   initEcAd();
</script>
  </fmt:bundle>
</html>
